import React, { PureComponent } from 'react'
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
// 设置高亮样式
import { coy } from 'react-syntax-highlighter/dist/esm/styles/prism'
// 设置高亮的语言
import {
    jsx,
    javascript,
    json,
    tsx,
    powershell,
    css,
    cshtml,
    typescript
} from 'react-syntax-highlighter/dist/esm/languages/prism'

class CodeBlock extends PureComponent {

    static defaultProps = {
        language: null,
        value: null
    }

    componentDidMount () {
        // 注册要高亮的语法，
        // 注意：如果不设置打包后供第三方使用是不起作用的
        SyntaxHighlighter.registerLanguage('css', css)
        SyntaxHighlighter.registerLanguage('jsx', jsx)
        SyntaxHighlighter.registerLanguage('javascript', javascript)
        SyntaxHighlighter.registerLanguage('js', javascript)
        SyntaxHighlighter.registerLanguage('json', json)
        SyntaxHighlighter.registerLanguage('ts', typescript)
        SyntaxHighlighter.registerLanguage('tsx', tsx)
        SyntaxHighlighter.registerLanguage('html', cshtml)
        SyntaxHighlighter.registerLanguage('sh', powershell)
        SyntaxHighlighter.registerLanguage('shell', powershell)
    }

    render () {
        const { language, value } = this.props
        console.log(language)
        return (
            <figure className="highlight">
                <SyntaxHighlighter language={language} style={coy}>
                    {value}
                </SyntaxHighlighter>
            </figure>
        )
    }
}

export default CodeBlock
